import { useEffect } from "react"
import * as THREE from 'three'
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import Stats from "three/examples/jsm/libs/stats.module.js";
/*
 * @Author: Leo.wang wanglizhigs@163.com
 * @Date: 2023-10-19 11:35:36
 * @LastEditors: Leo.wang wanglizhigs@163.com
 * @LastEditTime: 2023-10-25 22:31:00
 * @FilePath: /three-react/src/pages/Base.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */

const width = window.innerWidth - 200;
const height = window.innerHeight

function createRender(width, height) {

  // 创建场景
  const scene = new THREE.Scene();
  // 创建相机
  const camera = new THREE.PerspectiveCamera(60, width / height, 1, 1400);
  camera.position.set(0, 0, 400);
  camera.lookAt(0, 0, 0);
  // 创建webgl渲染器
  const renderer = new THREE.WebGLRenderer();
  // 设置渲染器窗口大小
  renderer.setSize(width, height);
  document.getElementById("container")?.appendChild(renderer.domElement);


  // // 创建几何体
  // const geometry = new THREE.BoxGeometry(100, 100, 100);
  // // 创建基础材质
  // const material = new THREE.MeshBasicMaterial({
  //   color: 0xffff00,
  //   transparent: true,
  //   opacity: 0.8,
  //   side: THREE.DoubleSide, //两面可见 
  // });

  // // 创建一个网格将几何体和材质组合在一起
  // const mesh = new THREE.Mesh(geometry, material);
  // // 将组合好的几何体加入到场景中
  // scene.add(mesh);

  const vertices = new Float32Array([
    0, 0, 0, //顶点1坐标
    80, 0, 0, //顶点2坐标
    80, 80, 0, //顶点3坐标
    0, 80, 0, //顶点4坐标
  ])


  // Uint16Array类型数组创建顶点索引数据
  const indexes = new Uint16Array([
    // 下面索引值对应顶点位置数据中的顶点坐标
    0, 1, 2, 0, 2, 3,
  ])

  const attribute = new THREE.BufferAttribute(vertices, 3)
  const geometry = new THREE.BufferGeometry();
  geometry.attributes.position = attribute
  geometry.index = new THREE.BufferAttribute(indexes, 1); //1个为一组
  const material = new THREE.PointsMaterial({
    color: 0xffff00,
    size: 10
  })

  // const material = new THREE.MeshBasicMaterial({
  //   color: 0x0000ff, //材质颜色
  //   side: THREE.FrontSide, //默认只有正面可见
  // });
  const point = new THREE.Points(geometry, material);
  scene.add(point)



  // 线条模型
  // const line = new THREE.Line(geometry, material);
  // scene.add(line);
  // 闭合线条
  // const lineLoop = new THREE.LineLoop(geometry, material);
  // scene.add(lineLoop);
  // 非连续线条
  // const lineSegments = new THREE.LineSegments(geometry, material);
  // scene.add(lineSegments)



  // const axesHelper = new THREE.AxesHelper(200);
  // scene.add(axesHelper)


  // 环境光
  const ambient = new THREE.AmbientLight(0xffffff, 0.4);
  scene.add(ambient);


  const stats = new Stats();
  document.getElementById("container")?.appendChild(stats.domElement);

  // 轨道控制器
  const controls = new OrbitControls(camera, renderer.domElement);
  controls.addEventListener('change', function () {

  })




  function animate() {
    requestAnimationFrame(animate)
    // mesh.rotation.x += 0.01;
    // 渲染场景
    renderer.render(scene, camera);
    stats.update();
  }
  animate();
  return renderer
}
export default function BufferGeometry() {
  useEffect(() => {
    if (!window.isMounted) {
      createRender(width, height);
      window.isMounted = true;
    }
  }, [])
  return (
    <div id="container"></div>
  )
}